<template>

  <Header v-if="isRouter"/>
  <router-view></router-view>

</template>


<script>
import Header from '@/views/Header/Header.vue';
import Footer from '@/views/Footer/Footer.vue';
import {nextTick, provide, ref, reactive, toRefs} from "vue";
import Dialog from "@/components/Dialog.vue";
  export default {
    setup(){
      const data = reactive({
         isRouter:ref(true)
      })

      const reload = () => {
        data.isRouter = false;
        nextTick(() => {
          data.isRouter = true;
        });
      };
      provide("reload", reload);

      return{
        ...toRefs(data),
        reload
      }
    },
    components: {
      Header,
      Footer,
      Dialog
    }
  }

</script>



<style>

  #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  nav a.router-link-exact-active {
    color: #42b983;
  }

  html {
    font-size: 192px;
  }

</style>